<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>view/workArea/others/fseRealTime</title>
		<!-- css代码 start -->
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/global.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" />
		<link href="../../../css/task.css" rel="stylesheet" />
		<style type="text/css">
			.d_int_tp{
				border: 0 !important;
				margin-top: 6px !important;
			}
			.select-tzstate{
				width: 100%;
				border: 0;
				color: #a9a9a9;
				font-size: 16px;
				text-align: left;
				padding: 15px;
			}
			.mui-bar-nav{
				box-shadow: 0 1px 6px #ea1e1a;
			}
		</style>
		<!-- css代码 end -->
	</head>
	<body>
		<!-- html代码 start -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">实时查询</h1>
		</header>
		<div class="mui-content" id="selConetnt" style="display: none;">
			<div class="details_con select_con">
				<div class="clum">
					<input type="text" class="d_int_tp" id="name" placeholder="请输入FSE姓名" />
				</div>
				<div class="btm autoHeight" style="position: relative;z-index: 999;">
					<p class="selectBtn" id="searchBtn">查 询</p>
				</div>
			</div>
		</div>
		<div class="mui-content" id="container" style="height: 85%;">
		</div>
		<!-- html代码 end -->

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1ca9acc9d0ea8d20406b89acb63c2b4a"></script>

		<script type="text/javascript" charset="utf-8">
			// 点标记集合
			var markers = [];
			// 创建地图实例
			var map;
			var enginnerId;
			
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					enginnerId = self.enginnerId;
					if (enginnerId) {
						h("#selConetnt").hide();
						h("#container").css({height:'100%'});
					} else {
						h("#selConetnt").show();
						h("#container").css({height:'85%'});
					}
					selectFseLocation();
					map = new AMap.Map('container', {
						zoom: 10,//级别
						center: [121.473658,31.230378],//中心点上海
						resizeEnable: true,
						offset: new AMap.Pixel(-13, -30)
					});
					h("#searchBtn").tap(function() {
						// 查询
						selectFseLocation();
					})
				});
			}(mui, document));
			
			// 查询fse实时位置
			function selectFseLocation() {
				// 清空点及弹窗
				closeInfoWindow();
				if(markers && markers.length>0) {
					map.remove(markers);
					markers = [];
				}
				var name = h("#name").val();
				var teamleaderId = app.getUser().enginnerId;
				// 查询post
				app.showWaiting('加载中...')
				ajaxGet(BASE_URL + "cc/location/getFseLocation", {
					"TeamleaderId": teamleaderId, 
					"name": name,
					"enginnerId": enginnerId
				}, function(data) {
					app.closeWaiting()
					// console.log(JSON.stringify(data))
					if (data.code == 200) {//查询成功
						if (data.data && data.data.length > 0) {
							addMarker(data.data);
						} else {
							app.toast("查询无结果")
						}
					} else {//查询失败
						app.closeWaiting()
						app.toast("查询无结果")
					}
				}, function(errorMsg) {
					console.log(JSON.stringify(errorMsg))
				});
			}
			
			// 标记Fse实时坐标点
			function addMarker(data){
				for (var i = 0; i < data.length; i ++) {
					if (data[i].online != "0" && data[i].postx != 0 && data[i].posty != 0) {
						var marker = new AMap.Marker({
							map: map,
							extData : {
								"data": data[i]
							},
							// icon: '../../img/car.png',
							autoRotation: true,
							topWhenClick: true,
							position: [data[i].postx, data[i].posty]
						});
						marker.id = data[i].enginnerId;
						marker.on('click', markerClick);
						markers.push(marker);
					}
				}
				
				//适应窗口
				map.setFitView();
			}
			
			// mark点击事件处理
			function markerClick(e) {
				var info;
				if (e.target) {
					info = e.target.getExtData().data;
				} else {
					info = e.extData.data;
				}
				showInfoWindow(e,info,info.address);
				// var lnglat = [info.postx,info.posty];
				// getAddress(lnglat).then(value => {
				// 	// 显示内容
				// 	showInfoWindow(e,info,value)
				// }).catch(reason => {
				// 	// 失败了
				// 	showInfoWindow(e,info,reason)
				// })
			}
			
			// 打开标记点信息窗体
			function showInfoWindow(e, info, address) {
				var name = info.name != null ? info.name : '';
				var mobile = info.mobile != null ? info.mobile : '';
				//构建信息窗体中显示的内容
				var content = [];
				content.push("FSE姓名：" + name);
				content.push("手机号：" + mobile);
				content.push("地址：" + address);
				infoWindow = new AMap.InfoWindow({
				    content: content.join("<br/>"),  //使用默认信息窗体框样式，显示信息内容
				    offset: new AMap.Pixel(0, -22)
				});
				// infoWindow.on('open',showInfoOpen)
				// infoWindow.on('close',showInfoClose)
				infoWindow.open(map, e.target.getPosition());
			}
			
			// 关闭信息窗体
			function closeInfoWindow() {
				map ? map.clearInfoWindow() : null;
			}
			
			// 信息窗体打开回调
			function showInfoOpen(){
			}
			
			// 信息窗体关闭回调
			function showInfoClose(){
			}
			
			//获取地址信息
			function getAddress(lnglat){
				return new Promise((resolve, reject) => {
					AMap.plugin('AMap.Geocoder', function () {
						var geocoder = new AMap.Geocoder();
						geocoder.getAddress(lnglat, function(status, result) {
							if (status === 'complete' && result.info === 'OK') {
								// result为对应的地理位置详细信息
								resolve(result.regeocode.formattedAddress)
							} else {
								reject("地理位置获取失败")
							}
						});
					});
				})
			}
		</script>
		<!-- js代码 end -->
	</body>
</html>
